<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>自助式分析系统-数据库连接操作</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <!-- 引入 layui.js -->
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.min.js"></script>
  <style>
    .width_box{
      width: 50vh !important;
    }
    #main{
      width: 100%;
      height: auto;
      margin: 10vh auto 0 auto;
    }
    #conn_btn{
      margin-left: 140px;
      width: 35vh;
    }
    #tips{
        color: red;
        font-size:20px;
        font-weight:bold;
        margin-top: 20px;
        text-align: center;
    }
  </style>
</head>
<body>
    <div id="main">
        <form class="layui-form" action="/conn_db" method="post" onsubmit="return check()">
        <!-- 选择数据库 -->
        <div class="layui-form-item">
          <label class="layui-form-label">数据库类型</label>
          <div class="layui-input-block width_box">
            <select lay-verify="required" name="db_type" id="db_type">
                {% if db_type == 'mysql' %}
                <option value="mysql" >MySQL</option>
                <option value="pg" >PostgreSQL</option>
                {% elif db_type == 'pg' %}
                <option value="pg" >PostgreSQL</option>
                <option value="mysql" >MySQL</option>
                {% else %}
                <option></option>
                <option value="mysql" >MySQL</option>
                <option value="pg" >PostgreSQL</option>
                {% endif %}
            </select>
          </div>
        </div>
        <!-- 主机 -->
        <div class="layui-form-item">
          <label class="layui-form-label">主机</label>
          <div class="layui-input-block">
            <input type="text" name="host" id="host" required  lay-verify="required" placeholder="请输入主机" autocomplete="on"
                   class="layui-input width_box" value="{{db_host|safe}}">
          </div>
        </div>
         <!-- 端口 -->
        <div class="layui-form-item">
          <label class="layui-form-label">端口号</label>
          <div class="layui-input-block">
            <input type="text" name="port" id="port" required  lay-verify="required" placeholder="请输入端口" autocomplete="on"
                   class="layui-input width_box" value="{{db_port|safe}}">
          </div>
        </div>
        <!-- 用户名 -->
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input type="text" name="username" id="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="on"
                   class="layui-input width_box" value="{{db_username|safe}}">
          </div>
        </div>
        <!-- 密码 -->
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input type="text" name="password" id="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="on"
                   class="layui-input width_box" value="{{db_password|safe}}">
          </div>
        </div>
         <!-- 数据库 -->
        <div class="layui-form-item">
          <label class="layui-form-label">数据库</label>
          <div class="layui-input-block">
            <input type="text" name="db" id="db" required  lay-verify="required" placeholder="请输入数据库名称" autocomplete="on"
                   class="layui-input width_box" value="{{db_name|safe}}">
          </div>
        </div>
         <button type="submit" class="layui-btn" id="conn_btn">连接数据库</button>
            <p id="tips">{{tips|safe}}</p>
      </form>
    </div>
    <script>

    //Demo
    layui.use('form', function(){
      var form = layui.form;
      //监听提交
      form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
      });
    });
    function check(){
        console.log($("#db_type").val().length);
	　　if($("#db_type").val().length == 0 || $("#host").val() == null || $("#port").val() == "" ||
	    $("#username").val() == null || $("#password").val() == "" || $("#db").val() == null){
	　　　　return false;
	　　}
		return true;
　　}
    </script>
</body>
</html>